<template>
  <CommonPanel title="告警处置统计">
    <template #opt>
      <div>
        <CustomBtn
          v-for="(i, v) in btnList"
          :key="v"
          @click="customActive(v)"
          :active="v === index ? true : false"
        >
          {{ i.name }}</CustomBtn
        >
      </div>
    </template>
    <div class="content-box1">
      <div class="content-box1_top">
        总事件量
        <span>{{ allNum.count_number }}</span>
      </div>
      <div class="content-box1_bottom">
        <div class="echart-box">
          <CommonChart ref="myChart" :option="option" />
        </div>
        <div class="connent-box">
          <div class="connent-box_top">
            已处置事件 {{ allNum.processed_number }}
          </div>
          <div class="connent-box_bottom">
            未处置事件 {{ allNum.untreated_number }}
          </div>
        </div>
      </div>
    </div>
  </CommonPanel>
</template>

<script setup>
import * as echarts from "echarts";
import { computed, reactive } from "vue";
import { ref, onMounted, onUnmounted } from "vue";
import { getEvent } from "@/api/security-board";

const btnList = ref([
  {
    name: "今日",
  },
  {
    name: "近一周",
  },
  {
    name: "近一月",
  },
]);
const allNum = reactive({
  count_number: 0,
  processed_number: 0,
  untreated_number: 0,
});
const index = ref(0);
let num = ref(0);
const myChartRef = ref(null);
const myChart = ref(null);
const percent = ref(0);
let timer;
onMounted(() => {
  if (myChartRef.value) {
    myChart = echarts.init(myChartRef.value);
  }
  getDataList();
  timer = setInterval(getDataList, 10000);
});
onUnmounted(() => {
  clearInterval(timer);
});
function getDataList() {
  getEvent({ type: index.value + 1 + "" }).then((res) => {
    if (res.code === 1) {
      allNum.count_number = res.data.num.count_number;
      allNum.processed_number = res.data.num.processed_number;
      allNum.untreated_number = res.data.num.untreated_number;
      percent.value =
        Math.trunc((allNum.processed_number / allNum.count_number) * 100) + "%";
    }
  });
}
function customActive(v) {
  clearInterval(timer);
  index.value = v;
  getDataList();
  timer = setInterval(getDataList, 10000);
}
function numb() {
  num = num + 5;
  myChart.setOption(option, true);
}
// setInterval(function () {
//   numb();
// }, 1000);

const option = computed(() => {
  return {
    title: [
      {
        text: "处置率",
        x: "center",
        top: "54%",
        textStyle: {
          color: "#9BA3AE",
          fontSize: 15,
          fontWeight: "100",
        },
      },
      {
        text: percent.value,
        x: "center",
        top: "35%",
        textStyle: {
          fontSize: "20",
          color: "#FCE598",
          fontFamily: "Lato",
          foontWeight: "600",
        },
      },
    ],
    polar: {
      radius: ["74%", "80%"],
      center: ["50%", "50%"],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "",
        type: "bar",
        roundCap: true,
        barWidth: 60,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(66, 66, 66, .3)",
        },
        data: [(allNum.processed_number / allNum.count_number) * 100],
        coordinateSystem: "polar",

        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#F9C65A",
              },
              {
                offset: 1,
                color: "#815326",
              },
            ]),
          },
        },
      },
    ],
  };
});
</script>

<style lang="scss" scoped>
.content-box1 {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 16px 6px;
  flex-direction: column;

  &_top {
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #9ba3ae;

    span {
      font-weight: 600;
      font-size: 24px;
      color: #65e3f8;
    }
  }

  &_bottom {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;

    & > div {
      width: 50%;
    }

    .echart-box {
      height: 100%;
    }

    .connent-box {
      flex: 1;
      padding: 0px 50px;
      height: 50%;
      border-left: 1px solid #6c6c6d;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      &_top {
        background-image: linear-gradient(
          164deg,
          rgba(10, 71, 102, 0.65) 0%,
          rgba(26, 48, 64, 0.3) 100%
        );
        box-shadow: 1px 1px 1px rgba(19, 47, 64, 0.51),
          1px 1px 1px #7397b0 inset;
      }

      &_bottom {
        margin-top: 20px;
        background-image: linear-gradient(
          164deg,
          rgba(102, 48, 10, 0.65) 0%,
          rgba(64, 45, 26, 0.3) 100%
        );
        box-shadow: 1px 1px 1px rgba(64, 41, 19, 0.51),
          1px 1px 1px rgba(176, 142, 115, 1) inset;
      }

      & > div {
        color: #fff;
        width: 100%;
        height: 28px;
        border-radius: 14px;
        padding: 0 15px;
        line-height: 28px;
      }
    }
  }
}

::v-deep {
  .content-box {
    width: 50% !important;
  }
}
</style>
